<template>
  <!-- 目录管理 -->
  <div class='container'>
  <div class="box" >
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="目录名称" style="margin-right:40px">
      <el-input v-model="formInline.user"></el-input>
    </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="formInline.region" placeholder="请选择">
      <el-option label="启用" value="1"></el-option>
      <el-option label="禁用" value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button size="mini" @click="emptyFn">清除</el-button>
    <el-button size="mini" type="primary" @click="searchDirect">搜索</el-button>
  </el-form-item>
  
<span style="margin-left:400px;padding-top:10px;">
  <button v-show="displayshow" style="margin-right:0px;margin-top:20px;font-size:12px;border-style:none;background-color: #fff;color: #409eff;" @click="returnFn">返回学科</button>
  <el-button type="success" size="mini" icon="el-icon-edit" @click="addShow" class="btn">新增目录</el-button>
</span>
</el-form>
</div>
    <el-alert
    style="margin-bottom:10px;"
    type="info"
    >
   <template>
    <slot name="title">
      一共{{counts}}条数据
    </slot>
   </template>
  </el-alert>
  <el-table :data="directors" style="width: 100%">
    <el-table-column type="index" label="序号" width="75">
      </el-table-column>
      <el-table-column  prop="subjectName" label="学科名称" width="170">
      </el-table-column>
      <el-table-column prop="directoryName" label="目录名称" width="170">

      </el-table-column>
      <el-table-column  prop="username" label="创建者" width="170">
       
      </el-table-column>
      <el-table-column  prop="addDate" label="创建日期" width="170">
       
      </el-table-column>
      <el-table-column  prop="totals" label="面试题数" width="170">
       
      </el-table-column>
      <el-table-column  label="状态" width="175">
        <template v-slot="{row}">{{row.state === 1?'启用':'禁用'}}</template>
      </el-table-column>
      <el-table-column  label="操作" width="175">
      <template slot-scope="{row}">
        <el-button @click="handleClick(row)" type="text" size="medium">{{row.name}}</el-button>
        <el-button type="text" size="medium" :disabled= row.Enable @click="modifyFn(row)">修改</el-button>
        <el-button type="text" size="medium" :disabled= row.Enable @click="deleteFn(row.id)">删除</el-button>
      </template>
       
      </el-table-column>
    </el-table>

      <div style="text-align:right;display:flex;margin-top:20px;justify-content: flex-end" >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="prev,pager,next,sizes,jumper"
          :total="counts">
        </el-pagination>
      </div>
    </div>
      <DirectorysAdd ref="Diadd" @onadd="getDirectory" :id="id" :row="row" ></DirectorysAdd>
  </div>
 
</template>
<script>
import DirectorysAdd from '../components/directorys-add'
import { list as getDirectorys, remove as deleteDirectorys} from '@/api/hmmm/directorys.js'
import { list as getSubjects } from '@/api/hmmm/subjects.js'
export default {
  components: {
    // 弹框子组件
    DirectorysAdd,
  },
  data () {
    
    return {
      subjectdata:{
        pagesize:1000
      },
      subjectid: undefined,  //学科传过来的id
      subjectname:undefined,//学科传过来的name
      displayshow:false,
      // 获取目录列表给后端传的参数
      data: {
        page: 1, //获取第几页的数据
        pagesize: 10, //一页数据多少条
        subjectID: undefined, //学科ID
        directoryName: undefined,//目录名称
        state:undefined,//状态
      },
      counts:0,//总数量
      id: undefined, //我们需要修改的id
      row:undefined,
      bianliang:'禁用',
      directors: [], //数据数组
      subjects: [], 
      currentPage4:1, //默认显示的页码
      // 弹框开关
      showd: false,
      showdliog:true,
      // 输入框内容
      shanghai: undefined,
      formInline: {
        // 搜索输入内容
        user: '',
          // 选择启用还是禁用
        region: ''
      },
      // 列表数据
      subjectlist:[],//学科列表
      }
  },
 
  // 一进页面就获取所有列表
  created () {
    const id = this.$route.query.id
    const name = this.$route.query.name
    if (id && name) {
      // 显示返回学科
      this.displayshow = true
      this.data.subjectID = id
    }
   this.getDirectory()
  },
  methods: {
    // 点击新增目录,显示弹框
    addShow () {
    // 调用子组件显示状态方法
      this.$refs.Diadd.onOpen()
    //  点击新增让子组件的form初始化
      this.$refs.Diadd.form = {
        subjectID: undefined,
        directoryName:''
      }
    },
    // 拿去学科列表
   async getSubjects () {
      const item = await getSubjects(this.subjectdata)
      this.subjectlist = item.data.items
    },
    // 一进页面获取数据
    async getDirectory () {
      const items = await getDirectorys(this.data)
      this.counts = items.data.counts
      const newarr =  items.data.items
      for (let i = 0; i < newarr.length; i++){
          if (newarr[i].state === 0) {
            newarr[i].Enable = false
            newarr[i].name = '启用'
          } else {
            newarr[i].Enable = true
            newarr[i].name = '禁用'
          }
          }
      this.directors = newarr
          //获取学科列表
    },
    // 当每页显示多少条数据触发的方法，val是当前显示的多少条数据
    handleSizeChange (val) {
      // console.log(val)
      // 每一页显示多少条数据
      this.data.pagesize = val
      this.getDirectory()
    },
    // 当页码发生改变的时候触发的方法 val是当前的页码
    handleCurrentChange (val) {
      // 当前页面
      this.data.page = val
      // 重新调用获取数据
      this.getDirectory()
    },
    // 点击修改状态
    handleClick (i) {
      if (i.state === 0) {
        i.state = 1
        i.name = '禁用'
        i.Enable = true
      } else {
        i.state = 0
        i.name = '启用'
        i.Enable = false
      }
      this.$message.success('修改成功');
    },
    // 点击搜索获取的数据
  async searchDirect () {
      // 将目录名称修改为我们输入的内容
      this.data.directoryName = this.formInline.user
      // 将状态改为我们选择的内容
      this.data.state = this.formInline.region
      // 重新获取数据
      // 如果this.data.directoryName 和this.data.state 都等于空 那么久让data = { page: 1, //获取第几页的数据
      //     pagesize: 10,}
    if (this.data.directoryName === ''&& this.data.state === '') {
        this.data = {
          page: 1, //获取第几页的数据
          pagesize: 10,
      }
    }
    if (this.data.state === '') {
      this.data = {
          page: 1, //获取第几页的数据
          pagesize: 10,
          directoryName:this.formInline.user
      }
    }
      this.getDirectory()
    },
    // 清空输入框的内容
    emptyFn () {
      this.formInline ={
        // 搜索输入内容
        user: '',
          // 选择启用还是禁用
        region: ''
      }
    },
    // 删除
    async deleteFn (id) {
      await deleteDirectorys({ id })
      // 重新调用获取数据的接口
      this.getDirectory()
    },
  // 修改
   modifyFn (row) {
      this.showdliog = true
     this.$refs.Diadd.modify(row)
     this.$refs.Diadd.onOpen()
    },
    // 点击返回学科
    returnFn () {
      this.$router.push('list')
    }
  }
}
</script>

<style scoped lang='less'>

.container{
  padding: 10px;
.box{
    // display: flex;
  border-radius: 5px;
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
  ::v-deep.btn{
    margin-left:4px;
  }
}
}





</style>
